<extend name="Include:Layout"/>
<block name="title">教学视频</block>
<block name="style">
<style>

</style>
</block>

<block name="main">
	<div class="weui_tab">
		<div class="weui_navbar">
			<div class="toolbar">
		        <div class="toolbar-inner">
		            <a href="{:U('index')}" class="picker-button close-popup">首页</a>
		            <h1 class="title" id="banji_title">教学视频</h1>
		        </div>
		    </div>
		</div>
		<div class="weui_tab_bd container" id="container">
			<div class="weui_panel weui_panel_access">
		        <div class="weui_panel_bd" id="vediolist">
		            
		        </div>
		    </div>
			<div class="weui-infinite-scroll">
				<div class="infinite-preloader"></div>
			</div>
		</div>
	</div>
	
<script type="text/html" id="article_list_tuwen">
<a href="/web/index/article/id/{{id}}" data-id="1" class="weui_media_box weui_media_appmsg showvedio">
    <div class="weui_media_hd">
        <img class="weui_media_appmsg_thumb" src="{{pic}}" alt="">
    </div>
    <div class="weui_media_bd">
        <h4 class="weui_media_title">{{title}}</h4>
        <p class="weui_media_desc">{{summary}}</p>
    </div>
</a>
</script>
</block>


<block name="script">
<script>
$(function () {
	
	$.showLoading("正在加载...");
	$.get('/Web/index/get_vedio_test',function(ret){
		if(ret.status){
			var data = ret.data;
			var html = '';
			for(var i = 0 ;i<data.length;i++){
				html += template('article_list_tuwen',data[i]);
			}
			$.hideLoading();
			$('#vediolist').html(html);
			$('#container').infinite();
			
			var loading = false;  //状态标记
			$('#container').infinite().on("infinite", function() {
				
			  	if(loading) return;
			  	$.showLoading("正在加载...");
			  	loading = true;
			  	$.get('/Web/index/get_vedio_test',function(ret){
					if(ret.status){
						var data = ret.data;
						var html = '';
						for(var i = 0 ;i<data.length;i++){
							html += template('article_list_tuwen',data[i]);
						}
						$.hideLoading();
						$('#vediolist').append(html);
						loading = false;
						$.hideLoading();
					}
				});
			});
		}
	});
	

		
});

</script>
</block>